<template>
  <div class="newinfo_upload">
    <form class="mui-input-group">
					<div class="mui-input-row">
						<input type="text" placeholder="输入标题" v-model="title">
					</div>
					<div class="mui-button-row">
						<button type="button" class="mui-btn mui-btn-primary" @click="upload">确认</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" @click="cancle">取消</button>
					</div>
				</form>
      <div class="mui-input-row" style="margin: 10px 5px;">
					<textarea id="textarea" rows="5" placeholder="请输入" v-model="container"></textarea>
			</div>
      <select-image ref = "upload"></select-image>
  </div>
  
</template>

<script>
import SelectImage from "../../components/mycomponents/SelectImage.vue"
export default {
  data(){
    return{
      value:"",
      title:"",
      container:"",
      filename:'',
      img_filename:''
    }
  },
  methods:{
    upload(){
      if(this.title!='' && this.container != ''){
        var obj = {title:this.title,container:this.container};
        this.$http.post("http://localhost:3000/txtupload",obj,{emulateJSON:true}).then((result)=>{
          this.filename = result.body[1];
          var _this = this;
          this.$refs.upload.upload().then(function(result){
            var new_obj = { title:_this.title,
                            img:result,
                            txt:_this.filename
                            };
            _this.$http.post("http://localhost:3000/setinfo",new_obj,{emulateJSON:true}).then((result)=>{
               _this.title = _this.container = "";
            })           
          });      
        })
        
      }else{
        alert("输入栏不可为空");
      }
      
    },
    cancle(){

    }
  },
  components: {
    "SelectImage": SelectImage
  }
}
</script>

<style lang ='less' scoped>
.newinfo_upload{
  border-top: 1.5px solid rgb(199, 192, 192);
  width: 100%;
}
.newinfo_upload{
 .mui-input-group:before{
   display: none !important;
 }
 .mui-input-group .mui-input-row:after{
   display: none;
 }
 .mui-input-group:after{
   display: none;
 }
 .mui-button-row{
   padding-top: 5px;
 }
 .mui-input-row{
   margin: 5px;
   >input{
     font-size: 16px;
     padding: 2px;
     padding-left: 8px;
     border-bottom: 1px solid rgb(199, 192, 192);
     color: rgb(122, 120, 120);
   }
   >textarea{
     font-size: 14px;
     color: rgb(122, 120, 120);
     padding: 2px;
   }
 }
}

</style>